<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>条件渲染</title>
</head>
<body>
    <!-- v-if -->
    <div id="app">
    <h1 v-if="awsesom">这条可不可见取决于v-if</h1>
    <h1 v-else>这条可不可见取决于上条是否为假</h1>
    <!-- 在 <template> 元素上使用 v-if 条件渲染分组 -->
    <template v-if="ok">
        <h1>title</h1>
        <p>666666</p>
        <p>777777</p>
    </template>

    <!-- v-else-if -->
    <p v-if="type==='A'">A</p>
    <p v-else-if="type==='B'">B</p>
    <p v-else-if="type==='C'">c</p>
    <P V-else>NO ABC</P>

    <!-- 用 key 管理可复用的元素不加kye会复用相同的元素 -->
    <template v-if="login==='username'">
        <label >username:</label>
        <input placeholder="enter your username" key="username-input">
    </template>
    <template v-else>
        <label >Email:</label>
        <input placeholder="enter your email" key="email-input">
    </template>
    <button @click="type1">点击</button>





    </div>

    <script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            //v-if
            awsesom:false,
            ok:false,
            //v-else-if
            type:'B',
            //用 key 管理可复用的元素
            login:'username'
        },
        methods:{
            //用 key 管理可复用的元素
            type1(){
                if(this.login=="username"){
                    this.login="no"
                }
                else{
                    this.login="username"
                }
                      

            }
        }
    })


    </script>
    
</body>
</html>